Fix(CSS): clamp() with bare arithmetic produces empty styles#415
Merged
1aron merged 1 commit intomaster-co:rcfrom May 3, 2026
Merged
Fix(CSS): clamp() with bare arithmetic produces empty styles#4151aron merged 1 commit intomaster-co:rcfrom
1aron merged 1 commit intomaster-co:rcfrom
Conversation
|
@0Miles is attempting to deploy a commit to the Aoyue Team on Vercel. A member of the Team first needs to authorize it. |
clamp(1.5rem, 2vw+1rem, 2.25rem) produced output that browsers reject — CSS spec requires whitespace around + and - even inside math functions. - New function-transformers/core.math-fn.ts: splits clamp args on top-level commas, wraps any arg with infix arithmetic in calc(), inserts spec-required spaces around + and - - Doesn't double-wrap calc()/min()/max()/var() - Doesn't misclassify unary signs (-1rem) - 6 test cases, including regression for already-wrapped clamp - Updates css-docs/modules/core.md Scope: clamp only. min/max with bare arithmetic stays a known issue (transformer breaks 5 existing tests for those — different code path). Verified in real Chrome: pre-fix font-size = 16px (default, declaration rejected); post-fix = 36px (clamp activated). Closes master-co#358
40e15af to
1f7362a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #358.
Summary
`clamp(1.5rem, 2vw+1rem, 2.25rem)` produced output that browsers reject. CSS spec requires whitespace around `+`/`-` even inside math functions; without `calc()` wrapping, Chrome falls back to default font-size.
Changes
Scope note
Only `clamp` is fixed in this PR. Adding the transformer to `min`/`max` broke 5 existing tests that rely on a different code path (number-with-baseUnit conversion). `min`/`max` with bare arithmetic remains a known issue, scoped for a separate PR.
Testing